<template>
	<view class="content">
		<!-- 顶部的logo -->
		<image class="logo" src="../../static/img/logo.png" mode="widthFix" />
		<!-- 手机号输入框组 -->
		<view class="input-group">
			<!-- 此处的type控制手机弹出的键盘类型 -->
			<input v-model="phone" type="number" placeholder="请输入手机号码" />
			<uni-icons class="icon left" type="phone-filled" color="#009900" size="60rpx"></uni-icons>
			<uni-icons class="icon right" type="clear" color="#1296DB" size="50rpx"></uni-icons>
		</view>
		<!-- 密码输入框组 -->
		<view class="input-group">
			<input v-model="pwd" type="text" :password="hidePwd" placeholder="请输入密码" />
			<uni-icons class="icon left" type="locked-filled" color="#009900" size="60rpx"></uni-icons>
			<uni-icons class="icon right" :type="hidePwd ? 'eye-slash-filled' : 'eye-filled'" color="#8A8A8A"
				@click="hidePwd=!hidePwd" size="50rpx"></uni-icons>
		</view>
		<!-- 登录按钮 -->
		<button class="btn" @click="doLogin">登 录</button>
		<!-- 忘记密码 -->
		<navigator class="link" url="../find-pwd/find-pwd" open-type="navigate">忘记密码</navigator>
	</view>
</template>

<script>
	import {
		login
	} from '../../service'
	export default {
		data() {
			return {
				hidePwd: true, // 隐藏密码
				phone: '13501234567',
				pwd: '123456',
			}
		},
		methods: {
			// 判断登录，发送请求
			async doLogin() {
				let phone = this.phone.trim()
				let pwd = this.pwd.trim()
				// console.log(phone, pwd)
				// 验证
				if (!phone) {
					uni.showToast({
						title: '电话不能为空',
						icon: 'none',
						duration: 1000
					})
					return
				}
				if (!/^1[3-9]\d{9}$/.test(phone)) {
					uni.showToast({
						title: '电话格式错误',
						icon: 'error',
						duration: 1000
					})
					return
				}
				if (!pwd) {
					uni.showToast({
						title: '密码不能为空',
						icon: 'none',
						duration: 1000
					})
					return
				}
				// 把数据交给服务器，执行登录业务
				/****GET请求测试*****/
				// let url = 'https://www.codeboy.com/zhsqapi/user/list?pageNum=1&pageSize=5'
				// let [err, res] = await uni.request({
				// 	// 不给success回调，返回值就是Promise
				// 	url,
				// })
				// if (err) {
				// 	console.log('请求失败');
				// } else {
				// 	console.log(res.data)
				// }
				/*****POST请求测试*****/
				// let url = 'https://www.codeboy.com/zhsqapi/user/login'
				// let [err, res] = await uni.request({
				// 	url,
				// 	method: 'POST',
				// 	// JSON格式的数据
				// 	// data: `{
				// 	// 	"phone": "13501234567",
				// 	// 	"pwd": "123456"
				// 	// }`
				// 	// 而uni自动帮你把对象转为JSON格式
				// 	data: {
				// 		phone,
				// 		pwd
				// 	}
				// })
				// if (err) {
				// 	throw err
				// } else {
				// 	console.log(res.data);
				// }
				/*****使用封装的方法POST*****/
				// 为什么login返回的是一个对象？因为在封装用的async会自动封装成promise结果，所以我们这里需要用await进行等待
				let data = await login(phone, pwd)
				// console.log(data);
				if (data.code == 2000) {
					uni.setStorageSync('userToken', data.token)
					// 切换页签
					uni.switchTab({
						url: '/pages/index/index'
					})
				} else {
					uni.showModal({
						title: '错误',
						content: `登录失败！服务器错误
${data.msg}`,
						showCancel: false,
						confirmText: '好的',
						confirmColor: '#090'
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.logo {
		width: 404rpx;
		display: block;
		// 默认情况下，直接设置margin时发生了边距溢出，应该给父元素添加overflow
		// 我们这里因为父容器设置了弹性布局，弹性容器里的元素边距不会溢出，所以不用加overflow
		margin: 90rpx auto;
	}

	.input-group {
		margin-top: $uni-spacing-col-lg;
		position: relative;
		padding: 0 $uni-spacing-row-lg;

		input {
			background-color: $uni-bg-color-grey;
			width: 100%;
			height: 104rpx;
			border-radius: $uni-border-radius-lg;
			padding: 0 88rpx;
		}

		.icon {
			position: absolute;
			// 绝对定位的元素竖直方向上居中显示
			top: 50%;
			// translate自身的一半
			transform: translateY(-50%);

			&.left {
				left: $uni-spacing-row-sm * 4;
			}

			&.right {
				right: $uni-spacing-row-sm * 4;
			}
		}
	}

	.btn {
		width: calc(100% - margin);
		margin: $uni-spacing-col-lg*2 $uni-spacing-row-lg 0;
		background-color: $zh-theme-dark;
		color: $uni-text-color-inverse;
		font-size: $uni-font-size-base;

		&:active {
			background-color: darken($color: $zh-theme-dark, $amount: 5%);
			// SCSS函数：darken()用于指定的颜色变深
		}
	}

	.link {
		color: $zh-theme-dark;
		text-align: center;
		margin-top: $uni-spacing-col-lg;
	}
</style>
